﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../../js/jq/jquery.lastest.js"></script>
    <script src="../../../js/ko/knockout.lastest.js"></script>

    <script src="../../../js/core/jquery.splitter.js"></script>
    <script src="../../../js/core/CCSV.js"></script>

    <link href="../../../css/yaml/core/base.css" rel="stylesheet" />
    <link href="../../../css/yaml/forms/gray-theme.css" rel="stylesheet" />
    <link href="../../../css/yaml/screen/typography.css" rel="stylesheet" />
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 12px;
        }

        .ym-wrapper
        {
            width: 550px;
            padding: 5px;
        }

        .ym-form
        {
            background: #fff;
        }

            .ym-form legend
            {
                padding: 0 0;
            }

            .ym-form .ym-fbox
            {
                padding: 0px;
            }

            .ym-form .ym-fbox-footer
            {
                background: #fff;
                border-top: 1px #e0e0e0 solid;
                padding: 1em .5em;
                margin: 0;
            }

        .box
        {
            margin: 0px;
            padding: 10px;
        }
    </style>
    <script src="js/index.js"></script>

    <script type="text/javascript">
        function CPortfolioViewModel(code, name, password, birthdate, national, favorite) {
            self = this;

            //-----------------------------------------------------
            // Properties
            //-----------------------------------------------------            
            self.Code = ko.observable(code);
            self.Name = ko.observable(name);
            self.Password = ko.observable(password);
            self.Birthdate = ko.observable(birthdate);
            self.IssueDate = ko.observable();
            self.National = ko.observable(national);
            self.Favorite = ko.observableArray(favorite);

            self.validateMessage = ko.observable();
            self.isValid = ko.computed(function () {
                var ret = true;
                //console.log(ko.toJSON(self));
                self.validateMessage(null);
                if (typeof self.Birthdate() != 'undefined') {
                    if (typeof self.IssueDate() != 'undefined') {
                        var start = new Date(self.Birthdate());
                        var end = new Date(self.IssueDate());
                        var diff = new Date(end - start);
                        var age = parseInt(diff / 1000 / 60 / 60 / 24 / 365);
                        if (age < 18) {
                            ret = false;
                            self.validateMessage('Not enough 18 years old !!!');                            
                        }
                    }
                }
                return ret;
            });
            self.statusInfo = ko.computed(function () {
                var br = '<br/>';
                var info = 'Portfolio Information' + br +
                            '  + Code: ' + self.Code() + br +
                            '  + Name: ' + self.Name() + br +
                            '  + Password: ' + self.Password() + br +
                            '  + Birthdate: ' + self.Birthdate() + br +
                            '  + IssueDate: ' + self.IssueDate() + br +
                            '  + National: ' + self.National() + br +
                            '  + Favorite: ' + self.Favorite() + br +
                            '  + isValid: ' + self.isValid() + br +
                            '  + validateMessage: ' + self.validateMessage();
                return info;
            });

            self.Nationals = ko.observableArray();
            self.Favorites = ko.observableArray();

            //-----------------------------------------------------
            // Behaviours.Client-Side
            //-----------------------------------------------------
            self.showInfo = function (model, event) {
                console.log('function: showInfo');
                console.log(self.statusInfo());
            };

            //-----------------------------------------------------
            // Behaviours.Server-Side
            //-----------------------------------------------------
            self.init = function () {
                $.post('service/data.ashx',
                    { action: 'getInfo' },
                    function (data) {
                        var list = data.CSV2JSON2();
                        self.Nationals(list[1]);
                        self.Favorites(list[2]);

                        ko.applyBindings(self);
                    });
            };
        }

        var portVM;
        $(function () {
            portVM = new CPortfolioViewModel("Bill", "Thiên Tuấn", "123456", "2006-03-20", 2, ['1', '3']);
            portVM.init();
        });
    </script>
</head>
<body>
    <div class="ym-wrapper">
        <form class="ym-form ym-columnar">
            <fieldset class="my-entry-form">
                <legend>Portfolio Information</legend>
                <div class="ym-fbox">
                    <label>
                        Code:
                    </label>
                    <input type="text" title="Code" class="wMid" data-bind="value: Code" />
                </div>
                <div class="ym-fbox">
                    <label>
                        Name:
                    </label>
                    <input type="text" title="Name" class="wLong" data-bind="value: Name" />
                </div>
                <div class="ym-fbox">
                    <label>
                        Password:
                    </label>
                    <input type="password" class="wMid" data-bind="value: Password" />
                </div>
                <div class="ym-fbox">
                    <label>
                        Birth date:
                    </label>
                    <input type="date" class="wLong" data-bind="value: Birthdate, valueUpdate:'change'" />
                </div>
                <div class="ym-fbox">
                    <label>
                        Issue date:
                    </label>
                    <input type="date" class="wLong" data-bind="value: IssueDate" />
                </div>
                <div class="ym-fbox">
                    <label>
                        National:
                    </label>
                    <select class="wLong" data-bind="options: Nationals, value: National, 
                                                    optionsCaption: 'Select an item...',
                                                    optionsValue:'ID', optionsText: 'Name'">
                    </select>
                </div>
                <div class="ym-fbox">
                    <label>
                        Favorite:
                    </label>
                    <select class="wLong" multiple="multiple" data-bind="options: Favorites, selectedOptions: Favorite, 
                                                                        optionsValue:'ID', optionsText: 'Name'">
                    </select>
                </div>
                <div class="ym-fbox-footer ym-fbox-button">
                    <input type="button" value="Save" class="ym-button ym-success" data-bind="enable: isValid" />
                    <input type="button" value="Show Info (in console)" class="ym-button ym-success" data-bind="click: showInfo" />
                    <input type="button" value="Clear" data-bind="enable: false" class="ym-button ym-danger" />
                </div>
                <!-- ko ifnot:isValid -->
                <div class="box error" data-bind="text:validateMessage"></div>
                <!-- /ko -->
                <div class="box info" data-bind="html:statusInfo"></div>
            </fieldset>
        </form>
    </div>
</body>
</html>